<template>
	<view >
		<scroll-view class="content">
			<view class="titleBar">
				<view class="logo">
					<image src="../../static/images/logo.png" mode=""></image>
				</view>
				<view class="title">
					<text>云上老家</text>
					<view class="search">
						<image src="../../static/icon/search.svg" mode=""></image>
						<input type="text" placeholder="请输入商品名" confirm-type="search"/>
					</view>
				</view>
			</view>
			<view class="notice">
				<view class="notice-title">
					老家告示
				</view>
				<view class="notice-content">
					放假通知：1月28日-2月15日放假
				</view>
			</view>
			<view class="carousel">
				<swiper
				 :indicator-dots="true" 
				 :autoplay="true" 
				 :interval="3000" 
				 :duration="1000"
				 >
					<swiper-item>
						<view class="swiper-item"><image src="../../static/uploadfiles/img125717b573d10e8.jpg" mode=""></image></view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item"><image src="../../static/uploadfiles/img128817b574050f0.jpg" mode=""></image></view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item"><image src="../../static/uploadfiles/img131417b57430840.jpg" mode=""></image></view>
					</swiper-item>
				</swiper>
			</view>
			<view class="grid">
				<view class="grid-item">
					<image src="../../static/images/combo.png" mode=""></image>
					<text>套餐预订</text>
				</view>
				<view class="grid-item">
					<image src="../../static/images/project.png" mode=""></image>
					<text>项目预订</text>
				</view>
				<navigator url="/pages/mall/presell/presell">
					<view class="grid-item">
						<image src="../../static/images/product.png" mode=""></image>
						<text>产品预售</text>
					</view>
				</navigator>
				<view class="grid-item">
					<image src="../../static/images/join.png" mode=""></image>
					<text>加盟合作</text>
				</view>
				<view class="grid-item">
					<image src="../../static/images/ticket.png" mode=""></image>
					<text>云上卡券</text>
				</view>
				<view class="grid-item">
					<image src="../../static/images/canteen.png" mode=""></image>
					<text>云上餐厅</text>
				</view>
				<navigator url="/pages/mall/index/index">
					<view class="grid-item">
						<image src="../../static/images/mall.png" mode=""></image>
						<text>云上商场</text>
					</view>
				</navigator>
				<view class="grid-item">
					<image src="../../static/images/entertainment.png" mode=""></image>
					<text>云上娱乐</text>
				</view>
				<view class="grid-item">
					<image src="../../static/images/inn.png" mode=""></image>
					<text>云上酒店</text>
				</view>
				<view class="grid-item">
					<image src="../../static/images/home.png" mode=""></image>
					<text>云上老家</text>
				</view>
			</view>
			<view class="seckill">
				<image src="../../static/images/ad.jpg" mode=""></image>
				<view class="seckill-list">
					<view class="seckill-list-item">
						<image src="../../static/images/seckill.jpg" mode=""></image>
						<text>菜园摘菜</text>
					</view>
					<view class="seckill-list-item">
						<image src="../../static/images/seckill.jpg" mode=""></image>
						<text>菜园摘菜</text>
					</view>
					<view class="seckill-list-item">
						<image src="../../static/images/seckill.jpg" mode=""></image>
						<text>菜园摘菜</text>
					</view>
					<view class="seckill-list-item">
						<image src="../../static/images/seckill.jpg" mode=""></image>
						<text>菜园摘菜</text>
					</view>
				</view>
			</view>
			<view class="coupon">
				<view class="coupon-title">
					<text>优惠券</text>
					<view class="more">
						更多&nbsp;>
					</view>
				</view>
				<view class="coupon-list">
					<view class="coupon-list-item">
						<image src="../../static/images/coupon.png"></image>
						<view class="coupon-card">
							<view class="coupon-card-price">
								<text class="price">￥30</text>
								<text class="tag">餐饮通用</text>
							</view>
							<view class="coupon-card-action">
								领取
							</view>
						</view>
					</view>
					<view class="coupon-list-item">
						<image src="../../static/images/coupon.png"></image>
						<view class="coupon-card">
							<view class="coupon-card-price">
								<text class="price">￥20</text>
								<text class="tag">住宿通用</text>
							</view>			
							<view class="coupon-card-action">
								领取
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
			</view>
		</scroll-view>
		<tabBar></tabBar>
	</view>
</template>

<script>
	import tabBar from '../../components/tabBar.vue'
	export default {
		components:{
			tabBar
		},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
		background-color: #f1f1f1;
	}
	.titleBar {
		display: flex;
		background-color: #fff;
		height: 150rpx;
		padding: 0 50rpx;
		&>.logo {
		width:150rpx;
		height: 150rpx;
		flex: 0 1;
			&>image{
				width:150rpx;
				height: 150rpx;			
			}
		}
		&>.title {
		flex: 1 1;
		padding-left: 50rpx;
		display: flex;
		flex-direction: column;
			&>text {
				width: 100%;
				height: 50rpx;
				line-height: 50rpx;
				color: #36906c;
				margin-top: 10rpx;
				padding-left: 80rpx;
				font-family: '微软雅黑';
				font-weight: bold;
				cursor: pointer;
			}
			&>.search {
				background-color: #f3f3f3;
				height: 50rpx;
				margin-top: 10rpx;
				justify-content: space-between;
				border-radius: 25rpx;
				display: flex;
				&>image {
					width: 50rpx;
					height: 50rpx;
					margin: 2rpx 20rpx 0;
				}
				&>input {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 24rpx;
					flex-grow: 1;
				}
			}
		}
	}	
	.notice {
		background-color: #fff;
		display: flex;
		padding: 20rpx 50rpx;
		height: 50rpx;
		font-size: 30rpx;
		color: #808080;
		&-title {
			line-height: 50rpx;
			width: 150rpx;
			height: 50rpx;
		}
		&-content {
			line-height: 50rpx;
			height: 50rpx;
			flex-grow: 1;
			margin-left: 50rpx;
			padding-left: 20rpx;
			border-left: 1px solid #c8c8c8;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.carousel {
		width: 100%;
		height: 400rpx;
		overflow: hidden;
		&>swiper {
			height: 350rpx;
			margin: 35rpx 0 15rpx;
		}
	}
	.grid {
		padding: 0 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 690rpx;
		height: 300rpx;
		&-item {
			width: 100rpx;
			height: 100rpx;
			border-radius: 20rpx;
			margin-top: 20rpx;
			text-align: center;
			padding: 10rpx;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			&>image {
				width: 70rpx;
				height: 70rpx;
				display: block;
				margin: 0 auto 10rpx;
			}
			&>text {
				font-size: 20rpx;
				height: 20rpx;
			}
		}
	}
	.seckill {
		width: 700rpx;
		height: 250rpx;
		margin: 20rpx auto;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		&>image {
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
		&-list {
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			left: 40rpx;
			top: 40rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			&-item {
				width: 80rpx;
				height: 80rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				&>image {
					width: 100%;
					height: 100%;
					display: block;
					position: absolute;
				}
				&>text {
					background-color: rgba(42, 122, 90, .5);
					color: #fff;
					position: absolute;
					font-size: 20rpx;
					text-align: center;
					bottom: 0;
				}
			}
		}
	}
	.coupon {
		background-color: #c6fadb;
		width: 700rpx;
		margin: 40rpx auto;
		border-radius: 20rpx;
		&-title {
			padding: 20rpx;
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			&>text {
				color: #084329;
				font-size: 40rpx;
				font-weight: bold;
			}
			&>.more {
				font-size: 30rpx;
				color: #1f8f5d;
			}
		}
		&-list {
			width: 660rpx;
			height: 150rpx;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			&-item {
				width: 300rpx;
				height: 150rpx;
				position: relative;
				&>image {
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 0;
				}
			}
		}
		&-card {
			position: absolute;
			z-index: 1;
			display: flex;
			width: 250rpx;
			padding: 30rpx 20rpx 10rpx 0;
			justify-content: space-between;
			&-price {
				display: flex;
				flex-direction: column;
				padding: 0 20rpx 10rpx 10rpx;
				&>.price {
					color: #084329;
					font-size: 50rpx;
				}
				&>.tag {
					background-color: rgba(31, 143, 95, .2);
					border-radius: 20rpx;
					color: #084329;
					font-size: 20rpx;
					padding: 10rpx;
					text-align: center;
				}
			}
			&-action {
				padding-top: 20rpx;
				font-weight: bold;
				color: #084329;
			}
		}
	}
	.swiper-item {
		text-align: center;
	}
	.footer {
		width: 100%;
		height: 150rpx;
	}
</style>
